<template>
  <div>
    <el-card class="box-card" :body-style="{padding:'5px'}">
      <div class="clearfix" style="padding:5px;">
        <span style="line-height: 36px;">详情</span>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-row>
          <el-col :span="8">
            <el-form-item label="基金代码:" prop="fundCode">
              <el-input v-model="form.fundCode" placeholder="请输入代码" :disabled="this.pageModel === 'EDIT'"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="基金名称:" prop="fundName">
              <el-input v-model="form.fundName" placeholder="请输入名称" :disabled="this.pageModel === 'EDIT'"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="基金类型:" prop='fundType'>
              <el-select v-model="form.fundType" placeholder="请输入类型" style='width: 100%'
                         :disabled="this.pageModel === 'EDIT'">
                <el-option
                  v-for="item in fundTypeList"
                  :label="item.fundType"
                  :value="item.fundType">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="原配比(%):" prop="percentBefore">
              <el-input v-model="form.percentBefore" placeholder="请输入代码" :disabled="disableForm"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="调仓配比(%):" prop="percentNow">
              <el-input v-model="form.percentNow" placeholder="请输入代码" :disabled="disableForm"
                        style='width: 100%'></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="info" @click="saveHandler" :disabled="disableForm">保存</el-button>
          <el-button type="danger" @click="resetHandler" :disabled="disableForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script type="text/babel">
  import assignDeep from 'assign-deep'
  import {mapActions} from 'vuex'

  import wareHouseStore from './bll/wareHouseStore'
  import store from '../../store'

  (!store.state.wareHouseStore) && store.registerModule('wareHouseStore', wareHouseStore)

  export default {
    data() {
      return {
        disableForm: true,
        pageModel: 'EDIT',
        form: {
          fundCode: '',
          fundName: '',
          fundType: '',
          percentBefore: '',
          percentNow: '',
          mappingId: ''
        },
        rules: {
          fundCode: [
            {required: true, message: '请输入基金代码', trigger: 'blur'}
          ],
          fundName: [
            {required: true, message: '请输入基金名称', trigger: 'blur'}
          ],
          fundType: [
            {required: true, message: '请选择基金类型', trigger: 'change'}
          ]
        },
        fundTypeList: [{
          fundType: '股票型'
        }, {
          fundType: '指数型'
        }, {
          fundType: '债券型'
        }, {
          fundType: '混合型'
        }, {
          fundType: '货币型'
        }
        ]
      }
    },

    props: {
      param: {
        type: Object
      },
      mode: {
        type: String
      }
    },

    computed: {
      getAllcombinations() {
        return this.$store.state.wareHouseStore.combinationsList;
      }
    },

    watch: {
      param(record) {
        if (record) {
          this.form.fundCode = record.fundCode;
          this.form.fundName = record.fundName;
          this.form.fundType = record.fundType;
          this.form.percentBefore = record.percentBefore;
          this.form.percentNow = record.percentNow;
          this.form.mappingId = record.mappingId;
        } else {
          assignDeep(this.form, {
            fundCode: '',
            fundName: '',
            fundType: '',
            percentBefore: '',
            percentNow: '',
            mappingId: ''
          });
        }
      },
      mode(val) {
        this.pageModel = val;
      }
    },

    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['addTransfersfund', 'editTransfersfund']),
      saveHandler() {
        var newform = this.form
        newform.warehouseId = this.$parent.$route.query.warehouseId
        console.log(newform)
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.pageModel === 'ADD') {
              this.addTransfersfund({formData: newform}).then(() => {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                this.$parent.initPage()
                this.disable()
                this.pageModel = 'EDIT'
              })
            } else {
              this.editTransfersfund({formData: newform}).then(() => {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.$parent.initPage()
                this.disable()
                this.pageModel = 'EDIT'
              })
            }
          } else {
            console.log('error submit!!');
            this.$message.error('请完善信息');
            return false;
          }
        })
      },

      resetHandler() {
        console.log(this.$refs.form)
        this.$refs.form.resetFields();
        this.disableForm = true;
      },

      initPage() {

      },

      // interface for invoking

      disable() {
        this.disableForm = true;
      },
      enable() {
        this.disableForm = false;
      },
      clear() {
        this.$refs.form.resetFields();
      }

    }
  }
</script>

